<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iPad</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3241864_y5olqh57uek.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/footer.css">
    <style>
         :root {
            --device-width: 770px;
            --device-height: 1336px;
            --ui-width: 640px;
            font-size: 15px;
        }
        
        body {
            background-color: #000;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: Helvetica;
            position: relative;
            padding-bottom: 100px;
        }
        
        h2 {
            color: #6e6e73;
            text-align: center;
            font-size: 4.5rem;
            font-weight: 600;
            margin: 6rem 0;
        }
        
        h2 p {
            margin: 0;
            color: #fff;
        }
        
        #iphone {
            position: relative;
            width: var(--device-width);
            height: var(--device-height);
        }
        
        #hardware {
            width: 100%;
            height: 100%;
            background-image: url(https://assets.codepen.io/2002878/iphone12-5g_on_phone.jpg);
            background-size: var(--device-width) var(--device-height);
            mask-image: url(https://assets.codepen.io/2002878/iphone12-5g_on_phone_mask.png);
            -webkit-mask-image: url(https://assets.codepen.io/2002878/iphone12-5g_on_phone_mask.png);
            mask-size: var(--device-width) var(--device-height);
            -webkit-mask-size: var(--device-width) var(--device-height);
        }
        
        #ui {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
        #ui .top-ui {
            display: block;
            width: var(--ui-width);
            height: auto;
            margin: 70px auto 0;
            padding-bottom: 30px;
            border-bottom: 1px solid #222;
        }
        
        #ui ul {
            list-style: none;
            margin: 0;
            padding: 0;
            --progress: 0;
        }
        
        #ui ul li img {
            display: block;
            width: var(--ui-width);
            height: auto;
            margin: 10px auto;
            padding-bottom: 10px;
            border-bottom: 1px solid #222;
            transform: scale(calc(1.8 - (0.8 * var(--progress)))) translateY(calc(-60px * (1 - var(--progress))));
            opacity: var(--progress);
        }
        
        #global-footer {
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav id="global-nav">
        <ul class="header">
            <li class="nav-item">
                <a href="../index.html" class="nav-link iconfont icon-apple-fill"> </a>
            </li>
            <li class="nav-item"><a href="./store.html" class="nav-link">Store</a></li>
            <li class="nav-item"><a href="./mac.html" class="nav-link">Mac</a></li>
            <li class="nav-item"><a href="ipad.html" class="nav-link">iPad</a></li>
            <li class="nav-item"><a href="./iphonese.html" class="nav-link">iPhone</a></li>
            <li class="nav-item"><a href="./iphone13.html" class="nav-link">Watch</a></li>
            <li class="nav-item"><a href="#" class="nav-link">AirPods</a></li>
            <li class="nav-item"><a href="homepod.html" class="nav-link">TV & Home</a></li>
            <li class="nav-item"><a href="./niublity.html" class="nav-link">Only on Apple </a></li>
            <li class="nav-item"><a href="#" class="nav-link">Accessories</a></li>
            <li class="nav-item"><a href="./niublity.html" class="nav-link">Support</a></li>
            <li class="nav-item">
                <a href="#" class="nav-link iconfont icon-search "> </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link iconfont icon-bag "> </a>
            </li>
        </ul>
    </nav>


    <!--  -->
    <h2>
        Superfast wireless
        <p>Hello 5G.</p>
    </h2>

    <div id="iphone">
        <div id="hardware"></div>
        <div id="ui">
            <img src="https://assets.codepen.io/2002878/iphone12-5g_top_ui.jpg" class="top-ui" alt="">

            <ul>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_01.jpg" />
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_02.jpg" />
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_03.jpg" />
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_04.jpg" />
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_05.jpg" />
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_06.jpg" />
                </li>
                <li>
                    <img src="https://assets.codepen.io/2002878/iphone12-5g_show_07.jpg" />
                </li>
            </ul>
        </div>
    </div>

    <!-- 页脚 -->
    <footer id="global-footer">
        <div class="footer-content">
            <div class="breadcrumbs">
                <a href="#" class="iconfont icon-apple-fill"></a>
                <ul class="paths">
                    <li class="path-item iconfont">
                        <span> Apple Store Online</span>
                    </li>
                    <li class="path-item iconfont">
                        <span> Apple Arcade</span>
                    </li>
                </ul>
            </div>

            <nav class="footer-list">
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>

            </nav>

            <div class="footer-info">
                <div class="shop"> More ways to shop: <a class="blue-link" href="#">Find an Apple Store</a> or <a class="blue-link" href="#">other retailer</a> near you. Or call 1‑800‑MY‑APPLE.</div>
                <div class="legal">
                    <div class="copyright">
                        Copyright © 2022 Apple Inc. All rights reserved.
                    </div>
                    <div class="links">
                        <a href="">Privacy Policy</a>
                        <a href="">Terms of Use</a>
                        <a href=""> Sales and Refunds</a>
                        <a href="">Legal</a>
                        <a href="">Site Map</a>
                    </div>
                    <div class="locale">United State</div>
                </div>
            </div>
        </div>
    </footer>
    <script>
        const rows = document.querySelectorAll('#ui ul li')
        const html = document.documentElement

        document.addEventListener('scroll', (e) => {
            let scrolled = html.scrollTop / (html.scrollHeight - html.clientHeight)

            let total = 1 / rows.length

            for (let [index, row] of rows.entries()) {
                let start = total * index
                let end = total * (index + 1)

                let progress = (scrolled - start) / (end - start)
                if (progress >= 1) progress = 1
                if (progress <= 0) progress = 0

                row.style.setProperty('--progress', progress)
            }
        })
    </script>
</body>

</html>